<template>
  <transition name="componentTab">
    <div class="food-detail" v-if="foodInfo" @scroll="scrollEvent">
      <header class="header" :class="{ 'header-scroll': scrollTop >= 100 }">
        <div class="left" @click.stop="$router.go(-1)">
          <svg
            t="1675766060581"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3763"
            width="16"
            height="16"
          >
            <path
              d="M393.390114 512.023536l347.948667-336.348468c20.50808-19.85828 20.50808-51.997258 0-71.792093-20.507056-19.826558-53.778834-19.826558-74.28589 0L281.990954 476.135164c-20.476357 19.826558-20.476357 51.981908 0 71.746044l385.061936 372.236839c10.285251 9.91379 23.728424 14.869662 37.173644 14.869662 13.446243 0 26.889417-4.956895 37.112246-14.901385 20.50808-19.826558 20.50808-51.919487 0-71.746044L393.390114 512.023536"
              p-id="3764"
              fill="#ffffff"
            ></path>
          </svg>
        </div>
        <div class="right">
          <div class="friend">
            <svg
              t="1675766019437"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2766"
              width="16"
              height="16"
            >
              <path
                d="M177.738667 652.949333A364.074667 364.074667 0 0 0 331.306667 826.517333v-310.826666L192.490667 645.152c-4.298667 4.010667-9.397333 6.613333-14.752 7.808z m-19.989334-62.922666l209.706667-195.562667H170.666667c-0.618667 0-1.237333-0.010667-1.845334-0.053333A362.186667 362.186667 0 0 0 149.333333 512c0 26.784 2.901333 52.906667 8.416 78.026667z m302.08-195.562667a32.064 32.064 0 0 1-5.152 6.186667l-62.112 57.909333c1.76 3.957333 2.730667 8.341333 2.730667 12.949333v79.541334c3.584 1.642667 6.912 3.978667 9.802667 7.008l67.573333 70.848h90.570667l68.298666-72.938667v-95.872l-68.181333-66.826667c-2.773333 0.778667-5.685333 1.194667-8.693333 1.194667h-94.837334zM395.232 855.466667A362.218667 362.218667 0 0 0 512 874.666667c32.768 0 64.522667-4.341333 94.72-12.490667l-211.413333-221.653333V853.333333c0 0.714667-0.032 1.418667-0.074667 2.133334z m275.466667-17.269334a364.266667 364.266667 0 0 0 155.690666-145.28H533.706667l131.946666 138.346667c2.026667 2.133333 3.712 4.469333 5.045334 6.933333z m184.693333-209.216A362.208 362.208 0 0 0 874.666667 512c0-36.661333-5.44-72.053333-15.552-105.408L650.912 628.906667H853.333333c0.693333 0 1.376 0.021333 2.058667 0.064zM197.962667 330.464h301.312l-139.733334-136.938667a31.978667 31.978667 0 0 1-5.898666-7.893333A364.266667 364.266667 0 0 0 197.973333 330.474667z m220.373333-168.917333l213.205333 208.938666v-195.2c0-1.92 0.170667-3.786667 0.490667-5.621333A362.112 362.112 0 0 0 512 149.333333c-32.384 0-63.786667 4.245333-93.653333 12.213334zM695.552 446.613333V487.637333l134.432-143.573333c0.746667-0.8 1.546667-1.557333 2.346667-2.261333a364.373333 364.373333 0 0 0-136.778667-142.666667v247.488zM512 938.666667C276.362667 938.666667 85.333333 747.637333 85.333333 512S276.362667 85.333333 512 85.333333s426.666667 191.029333 426.666667 426.666667-191.029333 426.666667-426.666667 426.666667z"
                fill="#ffffff"
                p-id="2767"
              ></path>
            </svg>
          </div>
          <div class="weixin">
            <svg
              t="1675766151088"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4878"
              width="16"
              height="16"
            >
              <path
                d="M867.265306 867.265306c-3.134694 0-6.791837-1.044898-9.92653-2.612245l-54.857143-28.734694c-39.183673 20.37551-83.069388 31.346939-128.522449 31.346939-141.061224 0-256-102.922449-256-229.877551s114.938776-229.877551 256-229.877551 256 102.922449 256 229.877551c0 50.677551-18.808163 100.310204-53.289796 140.538776l10.971428 65.306122c1.567347 7.836735-2.089796 15.673469-8.359183 20.37551-3.657143 2.089796-7.836735 3.657143-12.016327 3.657143z m-193.306122-417.959184c-118.073469 0-214.204082 84.114286-214.204082 188.081633s96.130612 188.081633 214.204082 188.081633c42.318367 0 83.069388-10.971429 118.073469-31.346939 6.269388-3.657143 14.106122-3.657143 20.37551-0.522449l27.167347 14.106122-5.746939-33.436734c-1.044898-6.269388 1.044898-13.061224 5.22449-17.763266 31.346939-33.436735 49.110204-76.277551 49.110204-119.640816 0-103.444898-96.130612-187.559184-214.204081-187.559184z"
                fill="#ffffff"
                p-id="4879"
              ></path>
              <path
                d="M579.918367 579.395918m-31.346938 0a31.346939 31.346939 0 1 0 62.693877 0 31.346939 31.346939 0 1 0-62.693877 0Z"
                fill="#ffffff"
                p-id="4880"
              ></path>
              <path
                d="M768 579.395918m-31.346939 0a31.346939 31.346939 0 1 0 62.693878 0 31.346939 31.346939 0 1 0-62.693878 0Z"
                fill="#ffffff"
                p-id="4881"
              ></path>
              <path
                d="M292.571429 344.293878m-36.571429 0a36.571429 36.571429 0 1 0 73.142857 0 36.571429 36.571429 0 1 0-73.142857 0Z"
                fill="#ffffff"
                p-id="4882"
              ></path>
              <path
                d="M512 344.293878m-36.571429 0a36.571429 36.571429 0 1 0 73.142858 0 36.571429 36.571429 0 1 0-73.142858 0Z"
                fill="#ffffff"
                p-id="4883"
              ></path>
              <path
                d="M166.138776 709.485714c-4.179592 0-8.881633-1.567347-12.538776-4.179592-6.269388-4.702041-9.404082-12.538776-8.359184-20.37551l14.106123-81.502041C117.028571 554.840816 94.040816 494.759184 94.040816 433.110204 94.040816 280.555102 232.489796 156.734694 402.285714 156.734694c80.979592 0 157.257143 27.689796 215.24898 78.889796 58.514286 51.2 91.428571 119.640816 92.995918 193.306122 0 5.746939-2.089796 11.493878-6.269388 15.67347s-9.926531 6.269388-15.673469 5.746938c-5.22449-0.522449-9.926531-0.522449-14.106122-0.522449-118.073469 0-214.204082 84.114286-214.204082 188.081633 0 14.106122 2.089796 28.734694 5.746939 42.840816 1.567347 5.746939 0.522449 12.016327-2.612245 17.240817s-8.881633 8.359184-14.628572 8.881632c-15.15102 2.089796-30.302041 3.134694-45.453061 3.134694-55.902041 0-109.714286-13.583673-157.257143-38.661224l-68.963265 36.571428c-4.179592 0.522449-7.836735 1.567347-10.971428 1.567347z m78.889795-83.591836c3.657143 0 7.314286 1.044898 10.44898 2.612244 48.587755 28.212245 106.057143 41.795918 164.571429 38.138776-1.567347-9.926531-2.089796-19.853061-2.089796-29.779592 0-124.865306 111.281633-226.742857 249.208163-229.877551-14.628571-117.028571-128.522449-208.979592-264.881633-208.979592-146.808163 0-266.44898 105.012245-266.448979 234.579592 0 54.334694 21.942857 107.62449 61.12653 149.420408 4.702041 4.702041 6.269388 11.493878 5.22449 17.763266l-8.359184 50.155102 41.795919-21.942858c3.134694-1.044898 6.269388-2.089796 9.404081-2.089795z"
                fill="#ffffff"
                p-id="4884"
              ></path>
            </svg>
          </div>
          <div class="svg">
            <svg
              t="1675680491901"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="6386"
              width="16"
              height="16"
            >
              <path
                d="M188.2 507.2m-91.5 0a91.5 91.5 0 1 0 183 0 91.5 91.5 0 1 0-183 0Z"
                fill="#ffffff"
                p-id="6387"
              ></path>
              <path
                d="M516.2 507.2m-91.5 0a91.5 91.5 0 1 0 183 0 91.5 91.5 0 1 0-183 0Z"
                fill="#ffffff"
                p-id="6388"
              ></path>
              <path
                d="M836.5 507.2m-91.5 0a91.5 91.5 0 1 0 183 0 91.5 91.5 0 1 0-183 0Z"
                fill="#ffffff"
                p-id="6389"
              ></path>
            </svg>
          </div>
        </div>
      </header>
      <div
        class="img-box"
        :style="{ backgroundImage: `url(${foodInfo.thumb_path})` }"
      ></div>
      <div class="content">
        <div class="title">{{ foodInfo.title }}</div>
        <div class="characteristic">
          精品·独家·浏览{{ foodInfo.views_count_text }}·收藏{{
            foodInfo.favo_counts
          }}
        </div>
        <!-- 用户信息 -->
        <div class="user">
          <div
            class="img-box"
            :style="{ backgroundImage: `url(${foodInfo.user.user_photo})` }"
          ></div>
          <div class="autor my-text">{{ foodInfo.user.nickname }}</div>
          <div class="lv">Lv.{{ foodInfo.user.lvl }}</div>
          <div class="btn" @click.stop="payAtt()">
            {{ !isPayAtt ? "关注" : "已关注" }}
          </div>
        </div>
        <!-- 菜谱难度 -->
        <div class="difficulty" v-if="!foodInfo?.cookstory">
          <div class="time">
            <div class="img-box">
              <img src="@/../public/images/home/1675770596977.png" alt="" />
            </div>
            <div>{{ foodInfo.cook_time || "暂无描述" }}</div>
          </div>
          <div class="star-rating">
            <div class="img-box">
              <img src="@/../public/images/home/1675770596978.png" alt="" />
            </div>
            <div>{{ foodInfo.cook_difficulty || "暂无描述" }}</div>
          </div>
        </div>
        <!-- 笔记 -->
        <div v-else class="cookstory">
          <div class="text">{{ foodInfo.cookstory }}</div>
          <div>
            {{ foodInfo.cookstorys[1]?.c }}
            <span>{{ foodInfo.cookstorys[2]?.c }}</span>
          </div>
        </div>
        <!-- 食材清单 -->
        <div class="detailed-list">
          <div class="detailed-list-title">
            <div class="title">食材清单</div>
            <div class="btn" @click.stop="$toast(api.msg)">加入采购清单</div>
          </div>
          <div class="list">
            <a
              :class="{ green: tag?.tu }"
              v-for="(tag, index) in foodInfo.major"
              :key="index"
              :href="tag?.tu"
            >
              <div>{{ tag.title }}</div>
              <div style="color: var(--text-black)">{{ tag.note }}</div>
            </a>
          </div>
          <div class="detailed-list-title">
            <div class="title">营养分析</div>
            <div class="btn" @click.stop="$toast(api.msg)">查看详情</div>
          </div>
          <!-- 营养图 -->
          <div
            class="nutrition"
            v-show="this.foodInfo?.nutrition_facts?.length"
          >
            <div
              class="myEcharts"
              id="myEcharts"
              style="width: 2.5rem; height: 1.87rem"
            ></div>
            <div class="right">
              <span>{{ foodInfo.pw }}</span>
              <div>千卡</div>
            </div>
          </div>
          <!-- 闪光点 -->
          <div class="glitter">{{ foodInfo.nutrition_facts_hint_text }}</div>
          <div class="detailed-list-title">
            <div class="title">烹饪步骤</div>
            <div class="btn">点击图片进入烹饪模式</div>
          </div>
          <!-- 步骤 -->
          <div class="practice">
            <div
              class="item"
              v-for="(item, index) in foodInfo.cookstep"
              :key="index"
            >
              <div class="position">
                步骤{{ item.position }}/{{ foodInfo.cookstep.length }}
              </div>
              <div
                class="img-box"
                :style="{ backgroundImage: `url(${item.image})` }"
              ></div>
              <div class="text">{{ item.content }}</div>
            </div>
          </div>
          <div class="release_time">{{ foodInfo.release_time }}</div>
          <div class="detailed-list-title">
            <div class="title">热门评论</div>
            <div class="count-text" v-if="commentsInfo">
              {{ commentsInfo?.first_level_comment_count }}条热门评论
            </div>
          </div>
          <!-- 评论列表 -->
          <div class="comments-list" v-if="commentsInfo">
            <CommentItem
              v-for="comment in commentsInfo.comments"
              :key="comment.id"
              :comment="comment"
              :author="foodInfo.user"
            />
          </div>
          <div class="btn">
            查看全部{{ commentsInfo?.first_level_comment_count }}条评论
          </div>
          <!-- 大家做过 -->
          <div class="detailed-list-title" v-if="commentsInfo?.notes?.length">
            <div class="title">大家做过</div>
            <div class="count-text" v-if="commentsInfo">
              {{ commentsInfo?.notes?.length }}个作品
            </div>
          </div>
          <div class="notes">
            <div class="notes-box">
              <div
                class="item"
                v-for="item in commentsInfo?.notes"
                :key="item.id"
              >
                <img :src="item?.image_u" alt="" />
                <UserHeader
                  class="user-header"
                  :name="item.author.n"
                  :photo="item.author.p"
                  :myStyle="'color:var(--text-white2);'"
                />
                <div class="title" v-if="item?.title">{{ item?.title }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
        <div class="show-input">说点什么</div>
        <div class="tag">
          <div class="svg">
            <svg
              t="1675769113550"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="5983"
              width="16"
              height="16"
            >
              <path
                d="M0 0h1024v1024H0z"
                fill="#262626"
                fill-opacity="0"
                p-id="5984"
              ></path>
              <path
                d="M523.946667 85.333333C802.773333 85.333333 982.826667 307.541333 982.826667 511.338667c0 242.837333-197.397333 448-458.837334 448-84.16 0-150.464-16.597333-221.610666-55.402667l-88.618667 50.197333c-27.797333 8.426667-50.474667 5.162667-68.010667-9.834666-17.557333-14.997333-25.130667-34.730667-22.72-59.2a19570.688 19570.688 0 0 0 29.653334-106.368C123.008 741.76 64 656.426667 64 511.338667 64 307.541333 245.141333 85.333333 523.946667 85.333333z m-1.28 64C304.064 149.333333 128 317.12 128 522.666667c0 77.354667 24.874667 151.125333 70.634667 213.184l5.397333 7.125333 18.218667 23.509333-36.970667 128.746667a0.32 0.32 0 0 0 0.490667 0.384l113.408-63.829333 26.752 14.592C385.237333 878.72 452.544 896 522.666667 896 741.269333 896 917.333333 728.213333 917.333333 522.666667S741.269333 149.333333 522.666667 149.333333z m-192 320a53.333333 53.333333 0 1 1 0 106.666667 53.333333 53.333333 0 0 1 0-106.666667z m182.848 0a53.333333 53.333333 0 1 1 0 106.666667 53.333333 53.333333 0 0 1 0-106.666667z m182.869333 0a53.333333 53.333333 0 1 1 0 106.666667 53.333333 53.333333 0 0 1 0-106.666667z"
                fill="#262626"
                p-id="5985"
              ></path>
            </svg>
          </div>
          <div>{{ commentsInfo?.first_level_comment_count || "评论" }}</div>
        </div>
        <div class="tag" :class="{ active: isPayRec }" @click.stop="payRecpie">
          <div class="svg">
            <svg
              t="1675769244734"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="7045"
              width="16"
              height="16"
            >
              <path
                d="M335.008 916.629333c-35.914667 22.314667-82.88 10.773333-104.693333-25.557333a77.333333 77.333333 0 0 1-8.96-57.429333l46.485333-198.24a13.141333 13.141333 0 0 0-4.021333-12.864l-152.16-132.586667c-31.605333-27.52-35.253333-75.648-8.234667-107.733333a75.68 75.68 0 0 1 51.733333-26.752L354.848 339.2c4.352-0.362667 8.245333-3.232 10.026667-7.594667l76.938666-188.170666c16.032-39.2 60.618667-57.92 99.52-41.461334a76.309333 76.309333 0 0 1 40.832 41.461334l76.938667 188.16c1.781333 4.373333 5.674667 7.253333 10.026667 7.605333l199.712 16.277333c41.877333 3.413333 72.885333 40.458667 69.568 82.517334a76.938667 76.938667 0 0 1-26.08 51.978666l-152.16 132.586667c-3.541333 3.082667-5.141333 8.074667-4.021334 12.853333l46.485334 198.24c9.621333 41.013333-15.36 82.336-56.138667 92.224a75.285333 75.285333 0 0 1-57.525333-9.237333l-170.976-106.24a11.296 11.296 0 0 0-12.010667 0l-170.986667 106.24zM551.786667 756.032l170.976 106.24c2.624 1.621333 5.717333 2.122667 8.650666 1.408 6.410667-1.557333 10.56-8.426667 8.928-15.424l-46.485333-198.24a77.141333 77.141333 0 0 1 24.277333-75.733333L870.293333 441.706667c2.485333-2.165333 4.053333-5.312 4.330667-8.746667 0.565333-7.136-4.490667-13.173333-10.976-13.696l-199.712-16.288a75.989333 75.989333 0 0 1-64.064-47.168l-76.938667-188.16a12.309333 12.309333 0 0 0-6.538666-6.741333c-5.898667-2.496-12.725333 0.373333-15.328 6.741333l-76.949334 188.16a75.989333 75.989333 0 0 1-64.064 47.168l-199.701333 16.288a11.68 11.68 0 0 0-7.978667 4.181333 13.226667 13.226667 0 0 0 1.333334 18.261334l152.16 132.586666a77.141333 77.141333 0 0 1 24.277333 75.733334l-46.485333 198.229333a13.333333 13.333333 0 0 0 1.514666 9.877333c3.488 5.792 10.581333 7.530667 16.064 4.128l170.986667-106.229333a75.296 75.296 0 0 1 79.562667 0z"
                fill="#262626"
                p-id="7046"
              ></path>
            </svg>
          </div>
          <div>{{ !isPayRec ? "收藏" : "已收藏" }}</div>
        </div>
        <div class="tag">
          <div class="svg">
            <img src="@/../public/images/home/1675770078218.png" alt="" />
          </div>
          <div>传学做</div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import CommentItem from "@/components/CommentItem.vue";
import UserHeader from "@/components/UserHeader.vue";
export default {
  components: {
    CommentItem,
    UserHeader,
  },
  data: () => {
    return {
      isPayRec: false, //收藏菜谱
      isPayAtt: false, //关注用户
      foodInfo: null,
      scrollTop: 0,
      tagInfo: null,
      myChart: null,
      commentsInfo: null,
      option: {
        tooltip: {
          trigger: "item",
          show: false,
        },
        legend: {
          orient: "horizontal",
          x: "55%",
          y: "35%",
          textStyle: {
            fontSize: 12,
          },
        },
        series: [
          {
            name: "营养分析",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            center: ["28%", "50%"],
            emphasis: {
              label: {
                show: true,
                fontSize: 16,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
            ],
          },
        ],
      },
    };
  },
  methods: {
    // showFoodTag(tag) {
    //   if (!tag?.tu) return;
    //   console.log(tag.title);
    //   this.axios
    //     .get(`${this.api.baseUrlData}/douguo/recipe/material/${tag.title}`)
    //     .then((res) => {
    //       console.log(res);
    //     });
    // },
    payRecpie() {
      this.foodInfo.r = {};
      this.foodInfo.r.id = this.foodInfo.cook_id;
      this.api.payRecpie(this.foodInfo, this.isPayRec);
      this.$toast.success("操作成功");
      this.isPayRec = !this.isPayRec;
    },
    payAtt() {
      this.api.payAttention(this.foodInfo.user, this.isPayAtt);
      this.$toast.success("操作成功");
      this.isPayAtt = !this.isPayAtt;
    },
    scrollEvent(e) {
      this.scrollTop = e.target.scrollTop;
    },
    getFoodDetail() {
      // this.axios.get(`${this.api.baseUrlData}/douguo/recipe/detail/${this.$route.params.foodid}`).then((res) => {
      //   console.log(res);
      //   this.foodInfo = res.data.result.recipe;
      // });
      // console.log(this.$route.params.foodid);
      this.axios
        .post(
          `${this.api.baseUrlV2}/recipe/v2/detail/${this.$route.params.foodid}`
        )
        .then((res) => {
          this.foodInfo = res.data.result.recipe;
          this.isPayAtt =
            JSON.parse(localStorage.getItem("attentionList"))?.some(
              (item) => item.user_id == this.foodInfo.user.id
            ) || false;
          this.isPayRec =
            JSON.parse(localStorage.getItem("recpieList"))?.some(
              (item) => item.r.id == this.foodInfo.cook_id
            ) || false;
          if (this.myChart) {
            this.myChart.dispose();
          }
          this.$nextTick(() => {
            this.foodInfo.nutrition_facts.forEach((item, index) => {
              this.option.series[0].data[index].name =
                item.nutrient + ":" + item.amount;
              this.option.series[0].data[index].value = Number.parseInt(
                item.amount
              );
            });
            let chartDom = document.getElementById("myEcharts");
            this.myChart = this.echarts.init(chartDom);
            this.myChart.setOption(this.option);
          });
        });
    },
    getFoodComments() {
      this.axios
        .get(
          `${this.api.baseUrlData}/douguo/recipe/relatedinfo/${this.$route.params.foodid}`
        )
        .then((res) => {
          this.commentsInfo = res.data.result;
        });
    },
    setEchartsData() {},
  },
  activated() {
    console.log(this.foodInfo,"111");
    if (this.foodInfo && this.foodInfo.id == this.$route.params.foodid) return;
    this.option.legend.textStyle.fontSize =
      ((innerWidth * 100) / 375 / 100) * 12;
    this.getFoodDetail();
    this.getFoodComments();
  },
};
</script>

<style lang="scss" scoped>
.btn {
  text-align: center;
  color: var(--text-green);
}
.food-detail {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--white);
  z-index: 100;
  padding-bottom: 1rem;
  box-sizing: border-box;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    display: none;
  }
  .header {
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    height: 0.5rem;
    width: 100%;
    align-items: center;
    box-sizing: border-box;
    padding: 0.1rem;
    transition: 0.3s;
    background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.6),
      rgba(0, 0, 0, 0)
    );
    .left {
      width: 0.2rem;
      min-width: 0.2rem;
      height: 0.38rem;
    }
    .right {
      flex-grow: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      > div {
        margin-left: 0.35rem;
      }
      .friend {
        width: 0.2rem;
        height: 0.2rem;
      }
      .weixin {
        width: 0.25rem;
        height: 0.25rem;
      }
      .svg {
        margin-right: 0.05rem;
        width: 0.2rem;
        height: 0.2rem;
      }
    }
  }
  .header-scroll {
    border-bottom: 0.01rem solid var(--border-gray);
    background-color: var(--white);
    background-image: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 1),
      rgba(255, 255, 255, 1)
    );
    svg {
      fill: #262626 !important;
    }
    path {
      fill: #262626 !important;
    }
  }
  .img-box {
    width: 100%;
    height: 100vw;
  }
  .content {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.15rem;
    .title {
      margin-top: 0.18rem;
      margin-bottom: 0.1rem;
      font-size: 0.25rem;
      line-height: 0.25rem;
      font-weight: bold;
      color: var(--black);
    }
    .characteristic {
      font-size: 0.15rem;
      line-height: 0.15rem;
      color: var(--text-gray3);
      margin-bottom: 0.4rem;
    }
    .user {
      width: 100%;
      display: flex;
      align-items: center;
      > div {
        margin-right: 0.1rem;
      }
      .img-box {
        width: 0.34rem;
        height: 0.34rem;
        border-radius: 0.17rem;
        overflow: hidden;
      }
      .autor {
        font-size: 0.16rem;
        font-weight: bold;
      }
      .lv {
        font-size: 0.12rem;
        line-height: 0.12rem;
        color: var(--text-lv);
      }
      .btn {
        width: 0.786rem;
        height: 0.32rem;
        border-radius: 0.16rem;
        margin-left: auto;
        margin-right: 0;
        text-align: center;
        line-height: 0.32rem;
        font-size: 0.12rem;
        background-color: var(--text-yellow);
        color: var(--white);
      }
    }
    .difficulty {
      margin: 0.3rem 0;
      font-size: 0.15rem;
      display: flex;
      align-items: center;
      color: var(--text-black);
      > div {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .img-box {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 0.25rem;
          margin-right: 0.1rem;
        }
      }
    }
    .cookstory {
      padding: 0.1rem 0;
      font-size: 0.2rem;
      line-height: 0.26rem;
      > div {
        > span {
          color: var(--text-green);
        }
      }
      .text {
        margin-bottom: 0.1rem;
      }
    }
    .detailed-list {
      width: 100%;
      box-sizing: border-box;
      color: var(--text-black);
      .detailed-list-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        font-size: 0.15rem;
        color: var(--text-green);
        margin: 0.18rem 0 0.1rem 0;
        > div {
          height: 100%;
        }
        .title {
          margin: 0;
          font-size: 0.2rem;
          font-weight: bold;
        }
        .count-text {
          height: 100%;
          margin-left: 0.1rem;
          margin-right: auto;
        }
      }
      .list {
        width: 100%;
        font-size: 0.2rem;
        > div {
          line-height: 0.2rem;
          margin: 0.2rem 0;
        }
        > a {
          display: flex;
          align-items: center;
          justify-content: space-between;
          line-height: 0.2rem;
          margin: 0.2rem 0;
        }
        .green {
          color: var(--text-green);
        }
      }
      .nutrition {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .right {
          flex-grow: 1;
          height: 1.87rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin-left: 0.1rem;
          border-left: 0.01rem solid var(--border-gray);
          padding: 0 0.1rem;
          box-sizing: border-box;
          > span {
            font-size: 0.15rem;
            font-weight: bold;
          }
          > div {
            font-size: 0.14rem;
            color: var(--text-gray);
          }
        }
      }
      .glitter {
        font-size: 0.15rem;
        font-weight: bold;
        color: var(--text-black);
      }
      .practice {
        width: 100%;
        .item {
          width: 100%;
          font-size: 0.2rem;
          color: var(--text-gray4);
          .position {
            font-size: 0.18rem;
            font-weight: bold;
            color: var(--text-black);
          }
          .img-box {
            width: 3.48rem;
            height: 2.45rem;
            border-radius: 0.14rem;
            overflow: hidden;
            margin: 0.1rem 0;
          }
          .text {
            padding-bottom: 0.2rem;
          }
        }
      }
      .release_time {
        font-size: 0.12rem;
        color: var(--text-gray2);
      }
      .comment-list {
        width: 100%;
      }
      .notes {
        width: 100%;
        overflow-x: scroll;
        .notes-box {
          display: flex;
          width: max-content;
          .item {
            position: relative;
            width: 1.62rem;
            height: 2.43rem;
            border-radius: 0.12rem;
            overflow: hidden;
            margin-right: 0.07rem;
            box-sizing: border-box;
            .user-header {
              position: absolute;
              left: 0;
              top: 0;
              width: 100%;
              box-sizing: border-box;
              padding: 0.05rem;
            }
            .title {
              margin: 0;
              width: 100%;
              box-sizing: border-box;
              padding: 0.05rem;
              position: absolute;
              bottom: 0;
              left: 0;
              color: var(--text-white2);
              font-size: 0.14rem;
              line-height: 0.14rem;
              font-weight: normal;
              background-image: linear-gradient(
                to bottom,
                rgba(0, 0, 0, 0),
                rgba(0, 0, 0, 0.8)
              );
            }
          }
        }
      }
    }
  }
  .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0.6rem;
    background-color: var(--white);
    display: flex;
    align-items: center;
    z-index: 100;
    box-sizing: border-box;
    padding: 0 0.1rem;
    box-shadow: 0 0 0.1rem 0.1rem rgb(0 0 0 / 2%);
    border-top: 0.01rem solid rgb(0 0 0 / 2%);
    .show-input {
      width: 1.07rem;
      height: 0.35rem;
      border-radius: 0.17rem;
      font-size: 0.15rem;
      line-height: 0.35rem;
      text-align: center;
      color: var(--text-gray2);
      background-color: var(--bgc-gray);
      margin-right: auto;
    }
    .tag {
      font-size: 0.15rem;
      display: flex;
      align-items: center;
      margin-right: 0.1rem;
      transition: 0.3s;
      .svg {
        width: 0.24rem;
        height: 0.24rem;
        margin-right: 0.05rem;
        transition: 0.3s;
      }
    }
    .active {
      color: var(--text-yellow);
      svg,
      path {
        fill: var(--text-yellow);
      }
    }
  }
}
</style>